<template>
    <div class="medicineList">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
            :row-class-name="tableRowClassName" style="width: 100%">
            <el-table-column prop="type" label="类型" width="80">
            </el-table-column>
            <el-table-column prop="name" label="药品名称" width="80">
            </el-table-column>
            <el-table-column prop="identifier" label="药品编号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="identifier" label="型号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="identifier" label="库存" width="80">
            </el-table-column>
            <el-table-column prop="identifier" label="数量" width="80">
            </el-table-column>
            <el-table-column prop="identifier" label="备注" width="120">
            </el-table-column>
            <el-table-column prop="identifier" label="负责人" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="identifier" label="创建时间" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="80">
                <template slot-scope="scope">
                    <el-tag disable-transitions type="info"
                        v-if="scope.row.state == '失效'">{{
                            scope.row.state
                        }}</el-tag>
                    <el-tag disable-transitions type="success"
                        v-if="scope.row.state == '有效'">{{
                            scope.row.state
                        }}</el-tag>

                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini"
                        @click="tipsDialogTableVisible = true">
                        修改
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <Pagination @getPagination="getPagination"></Pagination>

        <!-- 模态框——修改备注 -->
        <el-dialog title="修改备注" :visible.sync="tipsDialogTableVisible">
            <el-card>
                <div style="margin: 20px 0;"></div>
                <el-input type="textarea" placeholder="请输入备注..."
                    :autosize="{ minRows: 4, maxRows: 6 }" v-model="changeTipsInput"
                    maxlength="100" show-word-limit>
                </el-input>
                <div style="margin: 20px 0;text-align: center;">
                    <el-button type="primary" @click="changeTips">保存</el-button>
                </div>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
    name: '',
    data() {
        return {
            listTotal: [],
            tableData:
                [{
                    id: 1,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    state: '有效',
                    type: '入库',
                }, {
                    id: 2,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    state: '有效',
                    type: '出库',
                },
                {
                    id: 3,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    state: '有效',
                    type: '出库',
                },
                {
                    id: 4,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    state: '有效',
                    type: '入库',
                },
                {
                    id: 5,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    state: '有效',
                    type: '出库',
                },
                ],
            //模态框展开隐藏
            tipsDialogTableVisible: false,
            //模态框输入内容
            changeTipsInput: ''
        }
    },
    components: {
        Pagination
    },
    methods: {
        //列表颜色区分
        tableRowClassName({ row, rowIndex }) {
            if (row.type == '出库') {
                return 'warning-row';
            } else if (row.type == '入库') {
                return 'success-row';
            }
        },
        //获取点击的页码-------------------------------
        getPagination(page) {
            //   console.log('----',page);
            // this.currentPage = page;
            // if (this.searchStatus) {//点击了查询按钮---搜索数据---再点击分页
            //     //0-7  8 -15  page=1 2 3 
            //     console.log(page);
            //     this.tableData = this.listTotal.slice((page - 1) * 8, page * 8)
            //     return;
            // }
            //默认产品列表的分页功能

        },
        changeTips() {
            console.log(this.changeTipsInput);
            this.tipsDialogTableVisible = false;
        }
    },


}



</script>

<style lang="less" scoped>
.el-table {
    /deep/.warning-row {
        background: rgba(255, 193, 193,0.8);
    }
}

.el-table {
    /deep/ .success-row {
        background: rgba(204, 255, 204,0.8);
    }
}</style>